input[type=checkbox],
input[type=radio]
{
  display: none;
}

$height-radio: 16px;
$radio-gap: 3px;
$radio-length-timer: 2.5;

input[type=checkbox] + label.switch
{
  position: relative;
  display: block;
  @include border-radius($height-radio * 1.5);
  background-color: $color-border;
  @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1));
  height: $height-radio + $radio-gap * 2;
  width: $height-radio * $radio-length-timer;
  @include transition(all 0.3s);
  &:before{
    content: '';
    display: block;
    position: absolute;
    top: $radio-gap;
    left: $radio-gap;
    width: $height-radio;
    height: $height-radio;
    @include border-radius($height-radio);
    background-color: white;
    @include box-shadow(1px 2px 3px rgba(0,0,0,0.2));
    @include transition(all 0.3s);
  }
}

input[type=checkbox]:checked + label.switch
{
  background-color: $green;
  @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1));
  @include transition(all 0.3s);
  &:before{
    content: '';
    display: block;
    position: absolute;
    left: $height-radio * $radio-length-timer - $radio-gap - $height-radio;
    right: 0;
    width: $height-radio;
    height: $height-radio;
    @include border-radius($height-radio);
    @include transition(all 0.3s);
  }
}
